<template>

	
		<view ref="container">
			<view class="tablemargin">
				<view class="saitou">
					<view class="sanlan" v-show="fwhitep" :class="{active:shows==1}" @tap="twshow()">
						<view class="">{{unsed}}</view>
						<view class="">未使用(张)</view>
					</view>
					<view class="sanlan white" v-show="whitep" :class="{active:shows==1}" @tap="twshow()">
						<view class="">{{unsed}}</view>
						<view class="">未使用(张)</view>
					</view>
		<!-- 			<view class="fxiala" v-show="whitep">
						<view class="" v-if="gradelist.length>0" @tap="dengjishow1('')">
						全部等级
						<text> {{hj}}</text>
						</view>
						
						<view class="" v-for="item in gradelist" @tap="dengjishow1(item.cardGrade)">{{item.gradeName}}
							<text> {{item.num}}</text></view>
					</view> -->
					<view class="sanlan" v-show="fwhitep2" :class="{active:shows==2}" @tap="jsshow()">
						<view class="">{{used}}</view>
						<view class="">已使用(张)</view>
					</view>
					<view class="sanlan white" v-show="whitep2" :class="{active:shows==2}" @tap="jsshow()">
						<view class="">{{used}}</view>
						<view class="">已使用(张)</view>
					</view>
			<!-- 		<view class="fxiala2" v-show="whitep2">
						<view class="" v-if="gradelist.length>0" @tap="dengjishow2('')">全部等级<text> {{hj}}</text></view>
						<view class="" v-for="item in gradelist" @tap="dengjishow2(item.cardGrade)">{{item.gradeName}}
							<text> {{item.num}}</text></view>
					</view> -->
					<view class="sanlan" v-show="fwhitep3" :class="{active:shows==3}" @tap="tjshow()">
						<view class="">{{over}}</view>
						<view class="">已过期(张)</view>
					</view>
					<view class="sanlan white" v-show="whitep3" :class="{active:shows==3}" @tap="tjshow()">
						<view class="">{{over}}</view>
						<view class="">已过期(张)</view>
					</view>
		<!-- 			<view class="fxiala3" v-show="whitep3">
						<view class="" v-if="gradelist.length>0" @tap="dengjishow3('')">全部等级<text> {{hj}}</text></view>
						<view class="" v-for="item in gradelist" @tap="dengjishow3(item.cardGrade)">{{item.gradeName}}
							<text> {{item.num}}</text></view>
					</view> -->
					<view style="clear:both"></view>
				</view>
				<view v-if="userInfo.agent===1&&useStatus==0&&type==1">
					<view class="bottom tabletou">
						<view class="hanlant">兑换卡号 </view>
						<view class="hanlant">积分 </view>
						<view class="hanlant">卡密 </view>
					</view>
					<view class="top tablewei" v-if="collectProductList.length > 0">

						<view v-for="(item,collectProductListIndex) in collectProductList"
							:key="collectProductListIndex" class="tableweih">

							<view class="hanlant1"> {{item.cardNum}}</view>
							<view class="hanlant1"> {{item.points}}</view>
							<view class="hanlant1" @tap="huokami(item.cardPasw)">
								<view class="kamibtn">获取卡密</view>
							</view>
							<view style="clear:both"></view>
						</view>

					</view>
				</view>
				<view v-if="userInfo.agent===1&&useStatus==1&&type==1">
					<view class="bottom tabletou">
						<view class="hanlan">兑换卡号 </view>
						<view class="hanlan">积分 </view>
						<view class="hanlan">兑换时间 </view>
						<view class="hanlan">兑换号码 </view>
					</view>
					<view class="top tablewei" v-if="collectProductList.length > 0">

						<view v-for="(item,collectProductListIndex) in collectProductList"
							:key="collectProductListIndex" class="tableweih">

							<view class="hanlan1"> {{item.cardNum}}</view>
							<view class="hanlan1"> {{item.points}}</view>
							<view class="hanlan1"> {{item.exchangeTimeStr==null?'':item.exchangeTimeStr}}</view>
							<view class="hanlan1"> {{item.userPhone==null?'':item.userPhone}}</view>
							<view style="clear:both"></view>
						</view>

					</view>
				</view>
				<view v-if="userInfo.agent===1&&useStatus==0&&type==2">
					<view class="bottom tabletou">
						<view class="hanlant">兑换卡号 </view>
						<view class="hanlant">积分 </view>
						<view class="hanlant">到期时间 </view>
					</view>
					<view class="top tablewei" v-if="collectProductList.length > 0">

						<view v-for="(item,collectProductListIndex) in collectProductList"
							:key="collectProductListIndex" class="tableweih">

							<view class="hanlant1"> {{item.cardNum}}</view>
							<view class="hanlant1"> {{item.points}}</view>
							<view class="hanlant1"> {{item.endTimeStr}}</view>
							<view style="clear:both"></view>
						</view>

					</view>
				</view>

				<view v-if="userInfo.agent===2&&useStatus==0&&type==1">
					<view class="bottom tabletou">
						<view class="hanlant">兑换卡号 </view>
						<view class="hanlant">积分 </view>
						<view class="hanlant">卡密 </view>
					</view>
					<view class="top tablewei" v-if="collectProductList.length > 0">

						<view v-for="(item,collectProductListIndex) in collectProductList"
							:key="collectProductListIndex" class="tableweih">

							<view class="hanlant1"> {{item.cardNum}}</view>
							<view class="hanlant1"> {{item.points}}</view>
							<view class="hanlant1" @tap="huokami(item.cardPasw)">
								<view class="kamibtn">获取卡密</view>
							</view>
							<view style="clear:both"></view>
						</view>

					</view>
				</view>
				<view v-if="userInfo.agent===2&&useStatus==1&&type==1">
					<view class="bottom tabletou">
						<view class="hanlan">兑换卡号 </view>
						<view class="hanlan">积分 </view>
						<view class="hanlan">兑换时间 </view>
						<view class="hanlan">兑换号码 </view>
					</view>
					<view class="top tablewei" v-if="collectProductList.length > 0">

						<view v-for="(item,collectProductListIndex) in collectProductList"
							:key="collectProductListIndex" class="tableweih">

							<view class="hanlan1"> {{item.cardNum}}</view>
							<view class="hanlan1"> {{item.points}}</view>
							<view class="hanlan1"> {{item.exchangeTimeStr==null?'':item.exchangeTimeStr}}</view>
							<view class="hanlan1"> {{item.userPhone==null?'':item.userPhone}}</view>
							<view style="clear:both"></view>
						</view>

					</view>
				</view>
				<view v-if="userInfo.agent===2&&useStatus==0&&type==2">
					<view class="bottom tabletou">
						<view class="hanlant">兑换卡号 </view>
						<view class="hanlant">积分 </view>
						<view class="hanlant">到期时间 </view>

					</view>
					<view class="top tablewei" v-if="collectProductList.length > 0">

						<view v-for="(item,collectProductListIndex) in collectProductList"
							:key="collectProductListIndex" class="tableweih">

							<view class="hanlant1"> {{item.cardNum}}</view>
							<view class="hanlant1"> {{item.points}}</view>
							<view class="hanlant1"> {{item.endTimeStr}}</view>

							<view style="clear:both"></view>
						</view>

					</view>
				</view>
			</view>

			<view class="prompt">
				<view class="prompt-box" v-if="isHidden">
					<view class="prompt-content contentFontColor">
						<!-- <view class="prompt-title">转让用户手机号</view> -->
						<view class="" style="width: 85%;margin:0 auto">
							<view v-for="item in gradelist">
								<view class="prompt-title">{{item.gradeName}}(张):</view><input class="prompt-input"
									type="text" v-model="item.num1" placeholder="请输入" />

							</view>

							<view class="prompt-title">发送号码:</view><input class="prompt-input" type="text"
								v-model="phone" placeholder="请输入" />
							<view style="clear:both"></view>
						</view>

						<view class="prompt-btn-group">
							<view class="btn-item prompt-cancel-btn contentFontColor" @tap="_cancel">取消</view>
							<view class="btn-item prompt-certain-btn" @tap="_confirm">确定</view>
						</view>
					</view>
				</view>
				<view class="prompt-box" v-if="isHidden2">
					<view class="prompt-content contentFontColor">
						<!-- <view class="prompt-title">转让用户手机号</view> -->
						<view class="" style="width: 100%;margin:0 auto">


							<view class="prompt-title1">卡密展示:{{cardPasw}}</view>

						</view>

						<view class="prompt-btn-group">
							<view class="btn-item prompt-cancel-btn contentFontColor" @tap="_cancel2">取消</view>
							<view class="btn-item prompt-certain-btn" @tap="_confirm2">确定</view>
						</view>
					</view>
				</view>
			</view>

			<view style="clear:both"></view>
			<Loading :loaded="loadend" :loading="loading"></Loading>
	<!-- 		<view style="clear:both"></view>
			<view class="piliangzr" @tap="zhuanrangp()" v-if="userInfo.agent===1&&type==='1'&&useStatus==='0'">批量转发
			</view> -->
			<!--  -->
		</view>


</template>
<script> 
	import {
		mapGetters,
	} from "vuex";
	import Recommend from "@/components/Recommend";
	import {
		storeCardList,
		agentCardList,
		getCollectDel,
		transfer
	} from "@/api/user";
	import Loading from "@/components/Loading";
	export default {
		name: "GoodsFoot",
		components: {
			Recommend,
			Loading
		},
		props: {},
		data: function() {
			return {
				
				hj: '',
				fwhitep: true,
				whitep: false,
				fwhitep2: true,
				whitep2: false,
				fwhitep3: true,
				whitep3: false,
				shows: 1,
				isHidden: false,
				isHidden2: false,
				page: 1,
				limit: 20,
				collectProductList: [],
				gradelist: [],
				loadTitle: "",
				loading: false,
				loadend: false,
				phone: '',
				id: '',
				type: '1',
				useStatus: '0',
				cardGrade: '',
				over: '0',
				used: '0',
				unsed: '0',
				cardPasw: '',
			};
		},
		mounted: function() {
			this.get_user_collect_product();
		},
		onReachBottom() {
			!this.loading && this.get_user_collect_product();
		},
		computed: mapGetters(["userInfo"]),
		methods: {
			

			
			// uni.showModal({
			//   title: '提示',
			//   content: '非代理商用户、无法转让兑换卡。',
			// //content: '改目标手机号还不是商城用户，需要注册商城',
			//   success: function (res) {
			//     if (res.confirm) {
			//       console.log('用户点击确定');
			//     } else if (res.cancel) {
			//       console.log('用户点击取消');
			//     }
			//   }
			// });
			huokami(value) {
				this.isHidden2 = true
				this.cardPasw = value
			},
			dengjishow1(val) {
				this.collectProductList = [];
				this.page = 1;
				this.loadend = false;
				this.loading = false;
				this.cardGrade = val
				this.type = '1';
				this.useStatus = '0';
				this.fwhitep = true;
				this.whitep = false;
				this.get_user_collect_product();
			},
			dengjishow2(val) {
				this.collectProductList = [];
				this.page = 1;
				this.loadend = false;
				this.loading = false;
				this.cardGrade = val
				this.type = '1';
				this.useStatus = '1';
				this.fwhitep2 = true;
				this.whitep2 = false;
				this.get_user_collect_product();
			},
			dengjishow3(val) {
				this.collectProductList = [];
				this.page = 1;
				this.loadend = false;
				this.loading = false;
				this.cardGrade = val
				this.type = '2';
				this.useStatus = '0';
				this.fwhitep3 = true;
				this.whitep3 = false;
				this.get_user_collect_product();
			},

			twshow() {
				this.collectProductList = [];
				this.page = 1;
				this.loadend = false;
				this.loading = false;
				this.shows = 1;
				this.cardGrade = ''
				this.whitep2 = false;
				this.fwhitep2 = true;
				this.whitep3 = false;
				this.fwhitep3 = true;
				if (this.whitep) {
					this.whitep = false;
					this.fwhitep = true;
				} else {
					this.whitep = true;
					this.fwhitep = false;

				}
				this.type = '1';
				this.useStatus = '0';

				this.get_user_collect_product();
			},
			jsshow() {
				this.collectProductList = [];
				this.page = 1;
				this.loadend = false;
				this.loading = false;
				this.shows = 2;
				this.cardGrade = ''
				this.whitep = false;
				this.fwhitep = true;
				this.whitep3 = false;
				this.fwhitep3 = true;
				if (this.whitep2) {
					this.whitep2 = false;
					this.fwhitep2 = true;
				} else {
					this.whitep2 = true;
					this.fwhitep2 = false;
				}
				this.type = '1';
				this.useStatus = '1';

				this.get_user_collect_product();
			},

			tjshow() {
				this.collectProductList = [];
				this.page = 1;
				this.loadend = false;
				this.loading = false;
				this.shows = 3;
				this.cardGrade = ''
				this.whitep = false;
				this.fwhitep = true;
				this.whitep2 = false;
				this.fwhitep2 = true;
				if (this.whitep3) {
					this.whitep3 = false;
					this.fwhitep3 = true;
				} else {
					this.whitep3 = true;
					this.fwhitep3 = false;

				}
				this.type = '2';
				this.useStatus = '0';

				this.get_user_collect_product();
			},


			zhuanrangp() {
				this.isHidden = true
				// this.id=this.checkList.join()
			},

			_cancel2() {
				this.isHidden2 = false
			},
			_confirm2() {
				this.isHidden2 = false
			},
			_cancel() {
				this.isHidden = false
			},
			_confirm() {
				if (this.phone === '') {
					uni.showToast({
						title: "请输入手机号",
						icon: "none",
						duration: 2000,
						complete: () => {

						}
					});
					return
				}
				var json = []
				for (let i = 0; i < this.gradelist.length; i++) {
					if (this.gradelist[i].num1 > this.gradelist[i].num) {
						uni.showToast({
							title: this.gradelist[i].gradeName + "数量超过",
							icon: "none",
							duration: 2000,
							complete: () => {

							}
						});
						return
					}
					json.push({
						"cardGrade": this.gradelist[i].cardGrade,
						"num": this.gradelist[i].num1 == '' || this.gradelist[i].num1 == undefined ? '0' : this
							.gradelist[i].num1,
						"gradeName": this.gradelist[i].gradeName,
					})
				}
				transfer(this.phone, json, this.userInfo.uid).then(res => {
					if (res.data.succ) {
						uni.showToast({
							title: "转让成功",
							icon: "success",
							duration: 2000,
							complete: () => {
								this.isHidden = false
							}
						});
						this.collectProductList = [];
						this.page = 1;
						this.loadend = false;
						this.loading = false;
						this.get_user_collect_product();
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: "none",
							duration: 2000,
							complete: () => {

							}
						});
					}

				});
			},
			get_user_collect_product: function() {

				let that = this;
				if (that.loading) return; //阻止下次请求（false可以进行请求）；
				if (that.loadend) return; //阻止结束当前请求（false可以进行请求）；
				that.loading = true;

				var hj = 0
				if (that.userInfo.agent === 2) {
					storeCardList(that.page, that.limit, that.userInfo.uid, that.type, that.useStatus, that.cardGrade)
						.then(res => {

							that.loading = false;
							that.gradelist = res.data.grade
							that.over = res.data.over
							that.used = res.data.used
							that.unsed = res.data.unsed
							for (let i = 0; i < that.gradelist.length; i++) {
								hj = hj + Number(that.gradelist[i].num)
							}
							that.hj = hj
							//apply();js将一个数组插入另一个数组;
							that.collectProductList.push.apply(that.collectProductList, res.data.page.list);
							console.log("oooo",that.collectProductList);
							that.loadend = res.data.page.list.length < that.limit; //判断所有数据是否加载完成；
							that.page = that.page + 1;
						});
				} else if (that.userInfo.agent === 1) {
					agentCardList(that.page, that.limit, that.userInfo.uid, that.type, that.useStatus, that.cardGrade)
						.then(res => {

							that.loading = false;
							that.gradelist = res.data.grade
							that.over = res.data.over
							that.used = res.data.used
							that.unsed = res.data.unsed
							for (let i = 0; i < that.gradelist.length; i++) {
								hj = hj + Number(that.gradelist[i].num)
							}
							that.hj = hj

							//apply();js将一个数组插入另一个数组;
							that.collectProductList.push.apply(that.collectProductList, res.data.page.list);
							console.log("that.collectProductList",that.collectProductList);
							that.loadend = res.data.page.list.length < that.limit; //判断所有数据是否加载完成；
							that.page = that.page + 1;
						});
				}

			},

		}
	};
</script>
<style scoped>

	
	.white {
		background: #fff;
	}

	.fxiala {
		position: absolute;
		top: 118rpx;
		left: 0;
		background: #fff;
		width: 33.33%;
		z-index: 10;
		padding: 0 40rpx;
		line-height: 70rpx;
	}

	.fxiala text {
		color: #C8C7CC;
		margin: 0 0 0 5rpx;
	}

	.fxiala2 {
		position: absolute;
		top: 118rpx;
		left: 33.33%;
		background: #fff;
		width: 33.33%;
		z-index: 10;
		padding: 0 40rpx;
		line-height: 70rpx;
	}

	.fxiala2 text {
		color: #C8C7CC;
		margin: 0 0 0 5rpx;
	}

	.fxiala3 {
		position: absolute;
		top: 118rpx;
		right: 0;
		background: #fff;
		width: 33.33%;
		z-index: 10;
		padding: 0 40rpx;
		line-height: 70rpx;
	}

	.fxiala3 text {
		color: #C8C7CC;
		margin: 0 0 0 5rpx;
	}


	.active {
		color: rgb(236, 60, 41);
	}

	.saitou {
		width: 100%;
		margin: 0 0 30rpx 0;

		height: 120rpx;
		background: rgb(248, 249, 248);
		position: fixed;
		top: 0
	}

	.sanlan {
		width: 33.33%;
		float: left;
		padding: 10rpx 0;
		text-align: center;
		line-height: 50rpx;
	}

	.tablemargin {

		background: #fff;
		font-size: 24rpx;

	}

	.tabletou {
		background: rgb(236, 60, 41);

		color: #fff;
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		margin: 120rpx 0 0 0
	}

	.tablewei {

		width: 100%;
		height: 70rpx;
		line-height: 70rpx;
		color: #666666;
	}

	.tableweih {
		background: #fff;
		border-bottom: 1rpx solid rgb(215, 218, 211);
	}

	.hanlan {
		width: 25%;
		display: inline-block;
		text-align: center;


	}

	.hanlan1 {
		width: 25%;
		float: left;
		text-align: center;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		padding: 0 5rpx;
	}

	.hanlant {
		width: 33.33%;
		display: inline-block;
		text-align: center;


	}

	.hanlant1 {
		width: 33.33%;
		float: left;
		text-align: center;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		padding: 0 5rpx;
	}


	.prompt-box {
		position: fixed;
		left: 0;
		top: -140rpx;
		width: 100%;
		height: 120%;
		z-index: 11;
		background: rgba(0, 0, 0, .6);
		font-size: 30rpx;
	}

	.prompt-content {
		position: absolute;
		left: 50%;
		top: 600rpx;
		width: 80%;
		max-width: 600rpx;
		border: 2rpx solid #ccc;
		border-radius: 10rpx;
		box-sizing: bordre-box;
		transform: translate(-50%, -50%);
		overflow: hidden;
		background: #fff;
	}

	.prompt-title {
		width: 30%;
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		font-size: 30rpx;
		color: #000000;
		float: left;
		text-align: right;
		margin: 20rpx 0;
		/* border-bottom: 2rpx solid gray; */
	}

	.prompt-title1 {
		width: 100%;
		height: 120rpx;
		line-height: 70rpx;
		text-align: center;
		font-size: 50rpx;
		color: #000000;

		margin: 20rpx 0;
		/* border-bottom: 2rpx solid gray; */
	}

	.prompt-input {

		width: 66%;
		height: 70rpx !important;
		line-height: 70rpx !important;
		border: none !important;
		padding: 0 0 0 30rpx !important;
		font-size: 30rpx;
		float: right;
		margin: 20rpx 0;
		background: rgb(247, 244, 250);



	}

	.kamibtn {
		border-radius: 10rpx;
		background: rgb(230, 245, 249);
		color: #007AFF;
		text-align: center;
		height: 55rpx;
		line-height: 55rpx;
		margin: 8rpx 0 0 0;
		width: 90%;
	}

	.prompt-btn-group {
		display: flex;
	}

	.btn-item {
		width: 25%;
		height: 50rpx;
		line-height: 50rpx;
		font-size: 30rpx;
		background-color: white;
		justify-content: space-around;
		margin-bottom: 30rpx;
	}

	.prompt-certain-btn {
		color: royalblue;
		text-align: center;
		width: 50%
	}

	.prompt-cancel-btn {
		border: none;
		text-align: center;
		width: 50%
	}

	.contentFontColor {
		color: #868686;
	}



	.piliangzr {
		background: rgb(250, 89, 21);
		margin: 20rpx auto;
		border-radius: 40rpx;
		text-align: center;
		color: #fff;
		padding: 20rpx 15rpx;
		width: 30%;
		font-size: 26rpx;
	}
</style>
